<template>
    <div class="container">
        <div class="row justify-content-md-center">
            <div class="col-11">
                <div class="card mb-3" style="max-width: 1200px;">
                    <div class="row g-0">
                        <div class="col-md-4">
                            <img :src="produce.photo" class="img-fluid rounded-start" alt="...">
                        </div>
                        <div class="col-md-8">
                            <div class="card-body">
                                <h5 class="card-title">{{ produce.title }}</h5>
                                <p class="card-text">{{ produce.usage }}</p>
                                <p>价格 <span class="prodece_symbol">￥</span><span class="produce_price">{{ produce.price }}</span></p>
                                <p>配送至 <span class="consumer_address">{{ $store.state.user.consumer_address }}</span></p>
                                <div class="input-group mb-3" style="width: 300px;">
                                    <label class="input-group-text" for="inputGroupSelect01">尺寸</label>
                                    <select class="form-select" v-model="purchase_size" id="inputGroupSelect01">
                                        <option value="300cm*200cm">300cm*200cm</option>
                                        <option value="250cm*175cm">250cm*175cm</option>
                                        <option value="200cm*150cm">200cm*150cm</option>
                                    </select>
                                </div>
                                <div class="input-group mb-3" style="width: 300px;">
                                    <label class="input-group-text" for="inputGroupSelect01">颜色</label>
                                    <select class="form-select" v-model="purchase_color" id="inputGroupSelect01">
                                        <option value="海湾蓝">海湾蓝</option>
                                        <option value="星空紫">星空紫</option>
                                        <option value="雅灰白">雅灰白</option>
                                        <option value="橄榄绿">橄榄绿</option>
                                    </select>
                                </div>
                                <div class="input-group mb-3" style="width: 300px;">
                                    <input type="text" class="form-control" placeholder="购买个数" aria-label="Username" aria-describedby="basic-addon1" v-model="purchase_number">
                                </div>
                                <button type="button" class="btn btn-danger" style="width: 300px;" @click="confirm_purchase(produce.photo, produce.price, produce.title)">确认购买</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import $ from 'jquery';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import dayjs from 'dayjs';

export default {
    name: 'ProductInterfaceView',
    setup() {
        const produce_list = ref([]);
        const route = useRoute();
        const produce_name = route.params.producename;
        const produce = ref([]);
        const purchase_number = ref('');
        const purchase_color = ref('');
        const purchase_size = ref('');
        const store = useStore();
        const formattedDate = dayjs().format('YYYY-MM-DD HH:mm:ss');
        // const ws = new WebSocket('ws://47.121.28.202:8000/ws/buyinginformation/');
        // ws.addEventListener("open", (e) => {
        //     console.log(e);
        //     console.log("ws成功！！");
        // })
        // const sendmessage = () => {
        //     ws.send(JSON.stringify({
        //         'message': "孙歌孙歌孙歌孙歌孙歌孙歌孙歌孙歌孙歌孙歌孙歌孙歌孙歌孙歌",
        //     }));
        // }
        $.ajax({
            url: "http://47.121.28.202:8000/settings/food_cart/",
            type: "GET",
            success(resp) {
                produce_list.value = resp;
                $.ajax({
                    url: "http://47.121.28.202:8000/settings/roller_door/",
                    type: "GET",
                    success(resp) {
                        for (let i of resp) {
                            produce_list.value.push(i);
                        }
                        $.ajax({
                            url: "http://47.121.28.202:8000/settings/burglary_proof_door/",
                            type: "GET",
                            success(resp) {
                                for (let i of resp) {
                                    produce_list.value.push(i);
                                }
                                for (let j of produce_list.value) {
                                    if (j.title === produce_name) {
                                        produce.value = j;
                                    }
                                }
                            }
                        })
                    }
                })
            }
        })
        
        const confirm_purchase = (purchase_photo, price, purchase_title) => {
            $.ajax({
                url: "http://47.121.28.202:8000/settings/purchased/",
                type: "POST",
                headers: {
                    'Authorization': "Bearer " + store.state.user.access,
                },
                data: {
                    photo: purchase_photo,
                    price: price * parseInt(purchase_number.value),
                    title: purchase_title,
                    size: purchase_size.value,
                    consumer_id: store.state.user.id,
                    consumer_name: store.state.user.username,
                    consumer_address: store.state.user.consumer_address,
                    purchase_time: formattedDate,
                    purchase_number: purchase_number.value,
                    purchase_color: purchase_color.value,
                    is_apply: "False",
                },
                // success() {
                //     sendmessage();
                // }
            })
        }
        
        return {
            produce_list,
            produce,
            confirm_purchase,
            purchase_number,
            purchase_color,
            purchase_size,
        }
    }
}
</script>

<style scoped>
.card {
    border: 0px;
}
.img-fluid {
    border-radius: 0%;
}
.card-title {
    font-weight: bolder;
}
.produce_price {
    color: red;
    font-size: x-large;
}
.prodece_symbol {
    color: red;
}
.consumer_address {
    font-weight: bolder;
}
</style>